<template>
  <div class="content" flex="dir:top main:justify">
    <div class="top">
      <!-- <div flex="main:center cross:center">
        <img src="@/assets/img_qingqin/module8/radar_icon.png">
        <div style="margin-left: 24px">
          <span class="dight"><countTo
            :start-val="0"
            :end-val="d2Data.d2_total_num || 282"
            :duration="3000"
          /></span>
          件
          <div style="margin-top: 12px; font-size: 42px">轻微火灾</div>
        </div>
      </div>
      <div flex="main:center cross:center">
        <img src="@/assets/img_qingqin/module8/radar_icon.png">
        <div style="margin-left: 24px">
          <span class="dight"><countTo
            :start-val="0"
            :end-val="d2Data.total_payment_amount || 149"
            :duration="3000"
          /></span>
          件
          <div style="margin-top: 12px; font-size: 42px">简易程序</div>
        </div>
      </div>
      <div flex="main:center cross:center">
        <img src="@/assets/img_qingqin/module8/radar_icon.png">
        <div style="margin-left: 24px">
          <span class="dight"><countTo
            :start-val="0"
            :end-val="d2Data.total_payment_company_num || 105"
            :duration="3000"
          /></span>
          件
          <div style="margin-top: 12px; font-size: 42px">一般程序</div>
        </div>
      </div> -->
      <div
        v-for="(item, index) in typeData"
        :key="index"
        flex="main:center cross:center"
      >
        <img src="@/assets/img_qingqin/module8/radar_icon.png">
        <div style="margin-left: 24px">
          <span class="dight"
          ><countTo
            :start-val="0"
            :end-val="item.count"
            :duration="3000"
          /></span>
          件
          <div style="margin-top: 12px; font-size: 42px">{{ item.dict_label }}</div>
        </div>
      </div>
    </div>
    <img
      class="line"
      width="100%"
      src="@/assets/img_qingqin/module8/line.png"
    >
    <div class="bottom">
      <div>
        <span class="dight"
        ><countTo
          :start-val="0"
          :end-val="d2Data.total_company_num || 36"
          :duration="3000"
        /></span>
        张
        <p>
          <img
            style="vertical-align: middle"
            src="@/assets/img_qingqin/module8/mark.png"
          >
          现场图片数
        </p>
      </div>
      <div>
        <span class="dight"
        ><countTo
          :start-val="0"
          :end-val="d2Data.total_tax || 13"
          :duration="3000"
        /></span>
        个
        <p>
          <img
            style="vertical-align: middle"
            src="@/assets/img_qingqin/module8/mark.png"
          >
          视频材料数
        </p>
      </div>
      <div>
        <span class="dight">
          <countTo
            :start-val="0"
            :end-val="d2Data.total_in || 0"
            :duration="3000"
          />
          <!-- {{ d2Data.total_in || '--' }}</span>  --></span
        >件
        <p>
          <img
            style="vertical-align: middle"
            src="@/assets/img_qingqin/module8/mark.png"
          >
          火灾事故刑事案件移交数
        </p>
      </div>
      <div>
        <span class="dight">
          <countTo
            :start-val="0"
            :end-val="d2Data.total_new || 3"
            :duration="3000"
          />
        </span>
        场
        <p>
          <img
            style="vertical-align: middle"
            src="@/assets/img_qingqin/module8/mark.png"
          >
          火灾事故认定 复核数
        </p>
      </div>
      <div>
        <span class="dight">
          <countTo
            :start-val="0"
            :end-val="d2Data.warn_total || 1"
            :duration="3000"
          />
        </span>
        次
        <p>
          <img
            style="vertical-align: middle"
            src="@/assets/img_qingqin/module8/mark.png"
          >
          当日预警数
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import countTo from 'vue-count-to'
// import { d2 } from '@/api/home'
import { getTotalByType, getWarnList } from '@/api/map'
export default {
  components: { countTo },
  data() {
    return {
      d2Data: {},
      typeData: {},
      list: []
    }
  },
  async created() {
    getTotalByType().then((res) => {
      if (res.code == 200) {
        this.typeData = res.data
      }
    })
    const dateNowBegin = new Date().toLocaleDateString()
    const dateNowEnd = new Date(dateNowBegin).getTime() + 60 * 60 * 24 * 1000
    const beginTime = this.parseTime(dateNowBegin)
    const endTime = this.parseTime(dateNowEnd)
    getWarnList(beginTime, endTime, 30).then(res => {
      if (res.result.code == 0) {
        // console.log(JSON.stringify((res.result.data.alarms)));
        this.d2Data.warn_total = res.result.data.alarms.length
      }
    })
    // d2().then(res => {
    //   console.log(res)
    //   this.d2Data = res.data
    // })
    // this.d2Data = (await d2().catch(() => ({}))).data || {}
  }
}
</script>
<style lang="scss" scoped>
.content {
  font-size: 28px;
  padding: 40px;
  padding-top: 60px;
  background: url("~@/assets/img_xinyong/xyt_module_bg1.png") !important;
  background-size: 100% 100%;
  height: 100%;
  .top {
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #cbeaff;
    .dight {
      font-size: 80px;
      color: #fad900;
    }
  }
  .line {
    margin: 44px 0;
  }
  .bottom {
    display: flex;
    justify-content: space-around;
    color: #cbeaff;
    .dight {
      font-size: 60px;
      color: #39fff5;
      padding-left: 40px;
    }
  }
}
</style>
